import { delHospital, delHospitalList, getHoapitalList } from '@/api/hospitalSet/HospitalSet'
import { ReqHospitalList, ReqHospitalSetValue } from '@/api/hospitalSet/Model/HospitalSetType'
import { Button, Card, Form, Input, Modal, Table, message } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { DeleteOutlined, BorderLeftOutlined, ExclamationCircleFilled } from "@ant-design/icons"
import React, { useEffect, useState } from 'react'
import { useForm } from 'antd/lib/form/Form'
import { useNavigate } from 'react-router-dom'
const { confirm } = Modal;
export default function HospitalSet() {
    let [current, setcurrent] = useState<number>(1)
    let [pageSize, setpageSize] = useState<number>(5)
    let [total, settotal] = useState<number>(50)
    let [hospital, setHoapital] = useState<ReqHospitalList>([])
    let [loading, setLoading] = useState<boolean>(false)
    let [checkValue, setcheckValue] = useState<React.Key[]>([])
    // 获取From表单数据
    let [from] = useForm()
    let navigate = useNavigate()
    // 初始化数据
    let getHospital = async (page = current, limit = pageSize) => {
        setLoading(true)
        // 获取From表单数据
        let { hoscode, hosname } = from.getFieldsValue()
        let res = await getHoapitalList({ page, limit, hoscode, hosname })
        setHoapital(res.records)
        settotal(res.total)
        setLoading(false)
    }
    // 表单提交数据
    let finish = () => {
        getHospital(1, 5)
    }
    // 清空
    let clear = () => {
        getHospital()
    }
    //删除医院
    let del = (id: string, name: string) => {
        return () => {
            confirm({
                title: `确定要删除 ${name} 吗?`,
                icon: <ExclamationCircleFilled />,
                async onOk() {
                    await delHospital(id)
                    message.success("删除成功")
                    getHospital()
                    setcheckValue([])
                }
            })
        }
    }
    // 批量删除数据
    let delAll = async () => {
        confirm({
            title: `确定要删除 吗?`,
            icon: <ExclamationCircleFilled />,
            async onOk() {
                await delHospitalList(checkValue)
                message.success("删除成功")
                getHospital()
            }
        })
    }
    // 模拟生命周期
    useEffect(() => {
        getHospital()
    }, [current, pageSize])
    // 表格数据
    const columns: ColumnsType<any> = [
        {
            align: "center",
            title: '序号',
            render(key, value, indnex) {
                return indnex + 1
            }
        },
        {
            align: "center",
            title: '医院名称',
            dataIndex: 'hosname',
        },
        {
            align: "center",
            title: '医院编号',
            dataIndex: 'hoscode',
        },
        {
            align: "center",
            title: 'api基础路径',
            dataIndex: 'apiUrl',
        },
        {
            align: "center",
            title: '签名',
            dataIndex: 'signKey',
        },
        {
            align: "center",
            title: '联系人姓名',
            dataIndex: 'contactsName',
        },
        {
            align: "center",
            title: '联系人手机',
            dataIndex: 'contactsPhone',
        },
        {
            align: "center",
            title: '操作',
            render(row: ReqHospitalSetValue) {
                return <>
                    <Button type="primary" icon={<BorderLeftOutlined />} onClick={() => {
                        navigate(`/syt/hospital/set/update/${row.id}`)

                    }}></Button>
                    <Button danger type="primary" onClick={del(row.id, row.hosname)} icon={<DeleteOutlined />} className='ml'></Button>
                </>
            },
            fixed: "right"
        },
    ]
    return (
        <Card>
            {/* from表单 */}
            <Form
                onFinish={finish}
                onReset={clear}

                form={from}
                layout="inline"
            >
                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>
                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        查询
                    </Button>
                    <Button className='ml' type="default" htmlType="reset">
                        清空
                    </Button>
                </Form.Item>
            </Form>
            {/* div的两个按钮 */}
            <div className='mt'>
                <Button type="primary" htmlType="submit" onClick={() => {
                    navigate("/syt/hospital/set/add")
                }}>
                    添加
                </Button>
                <Button type="primary" onClick={delAll}  className='ml' danger disabled={checkValue.length===0}>
                    批量删除
                </Button>
            </div>
            {/* table表格 */}
            <Table
                rowSelection={{
                    onChange(selectedRowKeys: React.Key[]) {
                        setcheckValue(selectedRowKeys)

                    }
                }}
                scroll={{ x: 1600 }}
                className='mt'
                loading={loading}
                bordered
                rowKey="id"
                pagination={{
                    total: total,
                    pageSize: pageSize,
                    current: current,
                    pageSizeOptions: [5, 10, 15],
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal(total: number) {
                        return <span>总页数为{total}</span>
                    }, onChange(page: number, pageSize: number) {
                        setcurrent(page)
                        setpageSize(pageSize)

                    }
                }}
                columns={columns}
                dataSource={hospital}
            />
        </Card>
    )
}
